<template>
  <div class="profile-container">
    <!-- 个人信息显示部分 -->
    <div class="form-section">
      <h2>个人信息</h2>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="姓名">{{ userStore.user.username }}</el-descriptions-item>
        <el-descriptions-item label="学号">{{ userStore.user.no }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ userStore.user.email }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 修改个人信息部分 -->
    <div class="form-section">
      <h2>修改个人信息</h2>
      <el-form :model="userForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="userForm.username" placeholder="请输入新的姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUpdateInfo">保存修改</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 修改密码部分 -->
    <div class="form-section">
      <h2>修改密码</h2>
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUpdatePassword">修改密码</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { apiChangeInfo, apiResetPassword, apiLogout } from '@/request/admin'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 个人信息表单
const userForm = reactive({
  username: ''
})

// 修改个人信息
const handleUpdateInfo = async () => {
  try {
    // 调用修改个人信息的API
    await apiChangeInfo(userForm)
    // 更新 Pinia store 中的用户信息
    userStore.user.username = userForm.username
    ElMessage.success('个人信息修改成功')
  } catch (error) {
    ElMessage.error('修改失败：' + error.message)
  }
}

// 密码表单
const passwordFormRef = ref(null)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 密码表单验证规则
const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 修改密码
// 修改密码
const handleUpdatePassword = async () => {
  if (!passwordFormRef.value) return
  
  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 这里调用修改密码的API
        await apiResetPassword({
          password: passwordForm.oldPassword,
          new_password: passwordForm.newPassword
        })
        
        ElMessage.success('密码修改成功')
        // 清空表单
        passwordForm.oldPassword = ''
        passwordForm.newPassword = ''
        passwordForm.confirmPassword = ''

        // 添加延时，等待消息显示完成后再执行登出操作
        setTimeout(async () => {
          try {
            await apiLogout()
            localStorage.clear()
            router.push('/')
          } catch (error) {
            console.error('登出失败:', error)
          }
        }, 1500)
      } catch (error) {
        ElMessage.error('修改失败：' + error.message)
      }
    }
  })
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.form-section {
  width: 100%;
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.form-section h2 {
  margin-bottom: 20px;
  font-size: 18px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input) {
  max-width: 300px;
}

:deep(.el-descriptions) {
  padding: 10px;
}

:deep(.el-descriptions__label) {
  width: 100px;
  color: #606266;
}
</style>
